<template>
  <editPassword ref="editPassword" />
  <el-header class="header" :style="{ width: headerWidth, }">
    <!-- <el-row>
      <el-col :span="18">
        <div class="index-top-left" @click="goHome()">
          <img class="index-logo" :src="logo" />
          <div>{{ systemName }}</div>
        </div>
      </el-col>
      <el-col class="toggle_box" :span="2">
        <el-button class="serach_btn" @click="toggleBtn">切换旧版</el-button>
      </el-col>
      <el-col :span="6" class="index-right-bg">
        <el-dropdown class="index-drop">
          <span class="el-dropdown-link">
            <span v-if="user">{{ user.name }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editPassword()">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
</el-dropdown>
</el-col>
</el-row> -->
    <el-row>
      <el-col :span="18">
        <div class="index-top-left" @click="goHome()">
          <img class="index-logo" :src="logo" />
          <div>{{ systemName }}</div>
        </div>
      </el-col>
      <el-col :span="6" class="index-right-bg">
        <el-dropdown class="index-drop">
          <!-- <span class="el-dropdown-link">
            <span v-if="user">{{ user.name }}</span>
          </span> -->
          <div style="display: flex;align-items: center;">
            <div style="margin-right: 5px; color:#fff;">
              <p>{{ user.teacherNumber }} <br> {{ user.name }}</p>
            </div>
            <el-icon style="color: #fff;">
              <ArrowDown />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editPassword()">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

  </el-header>
</template>
<script>
import editPassword from "@/components/baseInfo/editPassword.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { getCurrentInstance } from "vue";
import { httpService } from "@/utils/httpService";
import { ArrowDown } from '@element-plus/icons-vue'
// import {
//  arrowDown
// } from "@element-plus/icons-vue";
export default {
  name: "Header",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      // systemName: "",
      logo: "",
      homeIndexName: '',
      menuData: null,
      headerWidth: "100%"
    };
  },
  setup() {
    const instance = getCurrentInstance()
    let logo = instance.appContext.config.globalProperties.$logo;
    return { "logo": logo }
  },
  props: ['systemName'],
  components: {
    editPassword, ElMessageBox, ArrowDown
  },
  created() {

  },
  mounted() {
    console.log(this.headerWidth)
  },
  methods: {
    toggleBtn() {
      const id = JSON.parse(window.sessionStorage.getItem('user')).id
      let params = new FormData()
      params.append("p", id);
      httpService("https://wx.zhengzhong.cn/sso/api/baseTeacher/switch", params, "post").then(
        (data) => {
          // console.log(data);
          // if (data.code == 200) {
          //   // ElMessage.success("删除成功");
          // } else {
          //   // ElMessage.error(data.message);
          // }
        }
      );
    },
    editPassword() {
      this.$refs.editPassword.dialogFormVisible = true;
    },
    goHome() {
      this.$router.push({ name: this.homeIndexName });
    },
    logout() {
      ElMessageBox.confirm("确定要退出系统吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // alert("header.js")
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("vuex");
          this.$router.replace("/login");
          // httpService("/openApi/logout", "", "post").then((data) => {
          //   this.clearBodyBackGround();
          //   sessionStorage.removeItem("token");
          //   sessionStorage.removeItem("user");
          //   this.$router.replace("/login");
          // });
        })
        .catch(() => { });
    },
    // 清除背景图
    clearBodyBackGround() {
      document.body.style.background = "";
    },
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  /* width: 100%; */
  --el-header-padding: 0 0px;
  --el-header-height: 60px;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  background-color: white;
  border-bottom: 1px solid #e0e5e9;
  background: url(../assets/header_bg.png) no-repeat;
  background-size: 100% 100%;
}

.index-top-left {
  display: flex;
  padding-left: 10px;
  cursor: pointer;
  height: 60px;
  align-items: center;
  /* padding-bottom: 10px; */
}

.index-top-left div {
  line-height: 60px;
  font-size: 22px;
  margin-left: 10px;
  color: #fff;
}

.index-logo {
  width: 40px;
  height: 40px;
  /* width: 50px;
  height: 50px; */
  /* padding: 15px 10px; */
}

.index-right-bg {
  /* background: url(../assets/right.png);
  background-position-x: right;
  background-repeat: no-repeat; */
}

.el-dropdown-link {
  text-align: center;
  color: white;
  cursor: pointer;
}

.index-drop {
  float: right;
  /* line-height: 70px; */
  line-height: 20px;
  width: 98px;
  color: #7BBCFF;
  font-size: 12px;
  height: 56px;
}

.toggle_box {
  display: flex;
  align-items: center;
}

.serach_btn {
  background-color: #007EFF;
  color: #fff;
  border-radius: 8px;
  border: none;
}
.el-tooltip__trigger:focus-visible {
    outline: unset;
}
</style>